import React from 'react';
import { Link, NavLink, withRouter } from 'react-router-dom';
import { Popover } from "antd";
import "../assets/stylesheets/header.css";

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username:localStorage.getItem("username"),
        }
    }
    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if(anchorElement) { anchorElement.scrollIntoView(); }
        }
    }
    existClick = (e) =>{
        console.log("existClick");
        localStorage.removeItem("username");
        this.props.history.push({
            pathname:"/",
        })
        this.setState({username:""});
        // this.forceUpdate();
    }
    scroll = (e) =>{
        console.log("window",window);
        scrollTo(0,0);
    }
    render(){
        let state = this.state;
        return(
            <div className="header">
                <div className="h-content">
                    <div className="logo" onClick={this.scroll}><Link to="/"><img src={require("../assets/images/logo.png")} alt=""/></Link></div>
                    <ul>
                        {/* <li onClick={()=>this.scrollToAnchor('announcement')}><Link to="/announcement">公告</Link></li>
                        <li onClick={()=>this.scrollToAnchor('airport')}><Link  activeClassName="active" to="/airport">机场</Link></li>
                        <li onClick={()=>this.scrollToAnchor('airplain')}><Link to="/airplain">飞机</Link></li>
                        <li onClick={()=>this.scrollToAnchor('passenger')}><Link to="/passenger">乘客</Link></li>
                        <li onClick={()=>this.scrollToAnchor('comments')}><Link to="/comments">留言</Link></li>  */}

                        <li><NavLink to="/announcement"  activeClassName="active"><span>公告</span></NavLink></li>
                        <li><NavLink to="/airport" activeClassName="active"><span>机场</span></NavLink></li>
                        <li><NavLink to="/airplain"  activeClassName="active"><span>飞机</span></NavLink></li>
                        <li><NavLink to="/passenger"  activeClassName="active"><span>乘客</span></NavLink></li>
                        <li><NavLink to="/comments"  activeClassName="active"><span>留言</span></NavLink></li>
                    </ul>
                    <div className="log-reg">
                        {!this.state.username?
                        <div>
                            <span className="login"><Link to="/login">登录</Link></span>
                            <span>|</span>
                            <span className="register"><Link to="/register">注册</Link></span>
                        </div>:
                        <Popover trigger="hover" placement="bottom" content={
                            <div>
                                <a><span className="username" onClick={this.existClick}>退出登陆</span></a>
                            </div>
                        }>
                            <div className="log-reg">
                                <div className="username"><Link to="/personal"><span>{state.username}</span></Link></div>
                            </div>
                        </Popover>
                        }
                    </div>
                </div>
            </div> 
        );
    }
}
export default withRouter(Header)